<template>
  <div class="container">
    <header>
      <van-nav-bar @click-left="onClickLeft">
        <template slot="left">
          <van-icon name="cross" size="18" class="close" />
        </template>
        <template slot="title">
          <van-icon size="20" class="title">登录</van-icon>
        </template>
      </van-nav-bar>
    </header>
    <main>
      <van-form @submit="formSubmit" class="login_form">
        <van-cell-group class="login_line">
          <van-row type="flex" align="center">
            <van-col span="2">
              <i class="login toutiao icon-shouji"></i>
            </van-col>
            <van-col span="22">
              <van-field
                span="20"
                v-model="mobile"
                name="mobile"
                placeholder="手机号"
                :rules="loginRules.mobile"
              >
              </van-field>
            </van-col>
          </van-row>
        </van-cell-group>
        <van-cell-group class="login_line">
          <van-row type="flex" align="center">
            <van-col span="2">
              <i class="login toutiao icon-iconmm"></i>
            </van-col>
            <van-col span="16">
              <van-field
                v-model="code"
                type="text"
                name="code"
                placeholder="验证码"
                :rules="loginRules.code"
              >
              </van-field>
            </van-col>
            <van-col span="6">
              <button
                v-if="countDownIsShow"
                class="login_btn"
                @click.prevent="sendCode"
              >
                发送验证码
              </button>
              <van-count-down
                v-else
                @finish="countTimeout"
                :time="countTime"
                format="ss s"
              />
            </van-col>
          </van-row>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button block type="info" @click.prevent="submit" class="login_submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </main>
  </div>
</template>

<script>
import { apiLogin, apiLoginSendCode } from '@/network'
const validatorCode = mobile => {
  console.log(mobile)
  return /^1[34589]\d{9}$/.test(mobile)
}
const validatorMobile = code => {
  return /\d{6}/.test(code)
}
export default {
  name: 'Login',
  data () {
    return {
      mobile: '15107133175',
      code: '246810',
      loginRules: {
        code: [
          { required: true, message: '请输入验证码' },
          { validator: validatorMobile, message: '验证码格式不正确' }
        ],
        mobile: [
          { required: true, message: '请输入手机号' },
          { validator: validatorCode, message: '手机号格式不正确' }
        ]
      },
      countTime: 6000,
      countDownIsShow: true
    }
  },
  methods: {
    onClickLeft () {
      console.log(111)
    },
    async formSubmit () {
      const res = await apiLogin({
        method: 'post',
        url: '/app/v1_0/authorizations',
        data: {
          code: this.code,
          mobile: this.mobile
        }
      })
      const { data: { data: { token } }, data: { data: { refresh_token: refreshToken } } } = res
      this.$store.commit('setLoginToken', token)
      this.$store.commit('setRefreshToken', refreshToken)
      this.$router.push('/index')
    },
    submit () {
      this.formSubmit()
    },
    async sendCode () {
      this.countDownIsShow = false
      try {
        await apiLoginSendCode({
          method: 'get',
          url: '/app/v1_0/sms/codes/' + this.mobile
        })
      } catch (err) {
        console.log(err)
      }
    },
    countTimeout () {
      this.countDownIsShow = true
      this.countTime = 6000
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #3396fc;
  color: #fff;
  .close {
    color: #fff;
  }
  .title {
    color: #fff;
  }
  main {
    .login_form {
      padding: 0 10px;
    }
    .van-button {
      background-color: #6fb3fa;
    }
  }
}
</style>
